import Head from 'next/head';
import Image from 'next/image';
import Link from 'next/link';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/grid';
import { Navigation, Grid } from 'swiper/modules';
import { FiArrowRightCircle, FiChevronLeft, FiChevronRight, FiArrowRight } from 'react-icons/fi';
import { motion } from 'framer-motion';

import client from '@/lib/client';
import { GET_HOME_DATA } from '@/lib/queries/homeQuery';
import { HomeData } from '@/lib/types/homeType';
import { GET_NEWS_DATA } from '@/lib/queries/newsQuery';
import { NewsData } from '@/lib/types/newsType';
import { GET_EVENTS_DATA } from '@/lib/queries/eventsQuery';
import { eventsData } from '@/lib/types/eventsType';
import { GET_POSTGRADUATESTUDY_DATA } from '@/lib/queries/postgraduateStudyQuery';
import { postgraduateStudyData } from '@/lib/types/postgraduateStudyType';
import { GET_PARTNERS_DATA } from '@/lib/queries/partnersQuery';
import { PartnersData } from '@/lib/types/partnersType';
import { Header } from '@/components/navigation/Header';
import { Footer } from '@/components/navigation/Footer';
import Button from '@/components/forms/Button';
import ScrollLink from '@/components/navigation/ScrollLink';
import checkEnvVariable from '@/utils/checkEnvVariable';
import updateImageUrl from '@/utils/updateImageUrl';
import { NewsAndEvents } from '@/components/info/NewsAndEvents';
import { PostgraduateStudy } from '@/components/info/PostgraduateStudy';


export default function HomePage(
    props: { 
        home: HomeData,
        news: NewsData,
        events: eventsData,
        postgraduate_study: postgraduateStudyData,
        partners: PartnersData,
        STORAGE_URL: string,
    }) {

    const { seo, ...page } = props.home;
    const news = props.news;
    const events = props.events;
    const postgraduate_study = props.postgraduate_study;
    const { partners_list } = props.partners;
    const storage = props.STORAGE_URL;
    const BG_IMAGE = updateImageUrl(storage, page.bg_image.id);
    const ORDER_IMAGE = updateImageUrl(storage, page.order_image.id);
    const SCROLL_MENU = [
        {
            title: 'Новости и мероприятия',
            go_to: 'section-news-and-events',
        },
        {
            title: 'Аспирантура',
            go_to: 'section-postgraduate',
        },
        {
            title: 'Партнеры',
            go_to: 'section-partners',
        },
    ];

    return (
        <>
            <Head>
                <title>{seo.title}</title>
                <meta name='description' content={seo.meta_description} />
                <meta name='viewport' content='width=device-width, initial-scale=1' />
                <link rel='shortcut icon' href='favicon.svg' type='image/svg+xml' />
            </Head>

            {/* Main block */}
            <div
                className='bg-[#4D3B31] bg-cover bg-[50%] min-h-[900px]' 
                style={{ backgroundImage: `url(${BG_IMAGE})` }}
            >
                <div className='bg-gradient-to-b from-[#303030] via-transparent to-transparent'>
                    <Header />
                    <main className='mx-auto max-w-7xl px-6 lg:px-8 py-24 md:py-36'>
                        <div className='mx-auto max-w-[57.5rem] text-white'>
                            <h1 className='text-6xl md:text-7xl lg:text-8xl font-bold'>
                                {page.title}
                            </h1>
                            <div className='max-w-[50rem] text-lg md:text-xl opacity-80 mt-8'>
                                {page.subtitle}
                            </div>
                            <div className='max-w-[50rem] mt-28'>
                                <div className='flex flex-col gap-y-24 md:gap-y-0 md:flex-row md:justify-between'>
                                    <div className='flex flex-col gap-5'>
                                        {SCROLL_MENU.map(( item, idx ) => (
                                            <motion.div
                                                key={idx}
                                                whileHover={{ x: 2 }}
                                            >
                                                <ScrollLink 
                                                    to={item.go_to}
                                                    className='flex items-center gap-4 text-lg opacity-80 hover:opacity-100'
                                                >
                                                    <FiArrowRightCircle color='white' size={24} />
                                                    {item.title}
                                                </ScrollLink>
                                            </motion.div>
                                        ))}
                                    </div>
                                    {ORDER_IMAGE ? (
                                        <Link href='/institute/history#orden_tkz'>
                                            <div className='flex items-center gap-4 group'>
                                                <div className='max-w-[78px]'>
                                                    <Image
                                                        src={ORDER_IMAGE}
                                                        width={page.order_image.width}
                                                        height={page.order_image.height}
                                                        alt={page.order_text}
                                                        className='mix-blend-luminosity group-hover:mix-blend-normal'
                                                    />
                                                </div>
                                                {page.order_text ? (
                                                    <div className='flex-1'>
                                                        <div className='max-w-[12rem] text-base opacity-80 group-hover:opacity-100'>
                                                            {page.order_text}
                                                        </div>
                                                    </div>
                                                ) : ''}
                                            </div>
                                        </Link>
                                    ) : ''}
                                </div>
                            </div>
                        </div>
                    </main>
                </div>
            </div>

            {/* News and events */}
            <NewsAndEvents news={news} events={events} />

            {/* Postgraduate */}
            <PostgraduateStudy programs={postgraduate_study} />

            {/* Partners */}
            <section
                id='section-partners'
                className='mx-auto max-w-7xl px-6 lg:px-8 py-16 md:py-28'
            >
                <div className='flex flex-col md:grid md:grid-cols-2 lg:grid-cols-3 md:gap-x-10 lg:gap-x-16'>
                    <div>
                        <h2 className='text-3xl font-bold uppercase'>
                            Партнеры
                        </h2>
                    </div>
                    <div className='lg:col-span-2 flex justify-end items-end pr-28 pb-4'>
                        <div className='text-base text-[#909090]'>
                            Партнеры ... в России и за рубежом
                        </div>
                    </div>
                </div>
                <div className='partners-in-russia flex justify-between items-center py-10 md:py-20'>
                    <div className='basis-28 flex justify-start'>
                        <div className='swiper-prev'>
                            <FiChevronLeft color='#303030' size={48} />
                        </div>
                    </div>
                    <div className='flex-1 overflow-hidden'>
                        <Swiper
                            breakpoints={{
                                320: {
                                    slidesPerView: 1,
                                    grid: {
                                        rows: 2,
                                        fill: 'row',
                                    }
                                },
                                640: {
                                    slidesPerView: 4,
                                    grid: {
                                        rows: 2,
                                        fill: 'row',
                                    }
                                },
                            }}
                            spaceBetween={50}
                            navigation={{
                                prevEl: '.partners-in-russia .swiper-prev',
                                nextEl: '.partners-in-russia .swiper-next',
                            }}
                            modules={[Navigation, Grid]}
                        >
                            {partners_list.map(( partner ) => (
                                <SwiperSlide key={partner.item.id}>
                                    <Link
                                        href={partner.item.link}
                                        target='_blank'
                                        rel='nofollow'
                                        className='block w-fit grayscale hover:grayscale-0 border border-solid border-[#BEBEBE] hover:border-[#030BA6] hover:shadow rounded-md overflow-hidden'
                                    >
                                        <Image
                                            src={partner.item.logo.id}
                                            width={partner.item.logo.width}
                                            height={partner.item.logo.height}
                                            alt={partner.item.title}
                                        />
                                    </Link>
                                </SwiperSlide>
                            ))}
                        </Swiper>
                    </div>
                    <div className='basis-28 flex justify-end'>
                        <div className='swiper-next'>
                            <FiChevronRight color='#303030' size={48} />
                        </div>
                    </div>
                </div>

                <div className='border-t border-solid border-[#C5C5C5] mt-10 pt-10 md:mx-28'>
                    <Button type='link' href='/institute/partners' className='text-lg'>
                        Все партнеры <FiArrowRight color='#030BA6' size={20} />
                    </Button>
                </div>
            </section>

            {/* Government agencies */}
            <section className='mx-auto max-w-7xl px-6 lg:px-8 py-16 md:py-28'>
                <div className='grid grid-cols-1 lg:grid-cols-2 md:gap-x-10 gap-y-16 md:gap-y-0 md:mx-28'>
                    {page.founders.map(( founder ) => (
                        <div
                            key={founder.item.id}
                            className='flex items-center gap-x-4'
                        >
                            <div className='max-w-[140px]'>
                                <Image 
                                    src={founder.item.logo.id}
                                    width={founder.item.logo.width}
                                    height={founder.item.logo.height}
                                    alt={founder.item.title}
                                />
                            </div>
                            <div className='flex-1'>
                                {founder.item.subtitle ? (
                                    <div className='text-sm text-[#909090]'>
                                        {founder.item.subtitle}
                                    </div>
                                ): ''}
                                <div className='mt-2'>
                                    {founder.item.link ? (
                                        <Link
                                            href={founder.item.link}
                                            target='_blank'
                                            rel='nofollow'
                                            className='text-lg md:text-xl hover:text-[#030BA6]'
                                        >
                                            {founder.item.title}
                                        </Link>
                                    ) : (
                                        <span className='text-lg md:text-xl'>
                                            {founder.item.title}
                                        </span>
                                    )}
                                </div>
                            </div>
                        </div>
                    ))}
                </div>
                
                {/* Banners */}
                {page.banners ? (
                    <div className='space-y-6 md:space-y-8 md:mx-28 mt-24 md:mt-32'>
                        {page.banners.map(( banner ) => (
                            <motion.div
                                key={banner.item.id}
                                whileHover={{ scale: 0.98 }}
                            >
                                <Link href={banner.item.link}>
                                    <Image 
                                        src={banner.item.image.id}
                                        width={banner.item.image.width}
                                        height={banner.item.image.height}
                                        alt={banner.item.title}
                                        className='rounded-md'
                                    />
                                </Link>
                            </motion.div>
                        ))}
                    </div>
                ) : ''}

            </section>
            <Footer />
        </>
    );
}


export const getStaticProps = async () => {
    try {
        const [
            { data: { home: homeData } },
            { data: { news: newsData } },
            { data: { events: eventsData } },
            { data: { postgraduate_study: postgraduateStudyData } },
            { data: { partners: partnersData } },
        ] = await Promise.all([
            client.query({ query: GET_HOME_DATA }),
            client.query({ query: GET_NEWS_DATA }),
            client.query({ query: GET_EVENTS_DATA }),
            client.query({ query: GET_POSTGRADUATESTUDY_DATA }),
            client.query({ query: GET_PARTNERS_DATA }),
        ]);

        if (!homeData || homeData.status !== 'published') {
            return {
                notFound: true,
            };
        }

        const STORAGE_URL = checkEnvVariable('DIRECTUS_STORAGE_URL');

        return {
            props: {
                home: homeData,
                news: newsData,
                events: eventsData,
                postgraduate_study: postgraduateStudyData,
                partners: partnersData,
                STORAGE_URL,
            },
        };
        
    } catch (error) {
        console.error('Error fetching data:', error);
        return {
            notFound: true,
        };
    }
}